<template>
  <div>
    <form @submit.stop.prevent="searchList(keywords)">
      <div class="search">
          <i></i>
          <input type="text" placeholder="输入歌手,歌曲" v-model="keywords"/>
          <i></i>
      </div>
    </form>
    <Suggest v-show="showSearch" :suggests="suggests" :keywords="keywords" @searchResult="searchList"/>
    <Loading v-show="searching"/>
    <SearchResult v-show="showList " :searchMusicList="searchMusicList"/>
    <!-- <p ref="scrollbar"><Loading /></p> -->
  </div>
</template>
<script>
import Suggest from '../components/Suggest'
import Loading from '../components/Loading'
import SearchResult from '../components/SearchResult'
export default {
  data(){
    return {
      keywords:'',
      suggests:[],
      searchMusicList:[],
      searching:false,//是否显示 加载loading
      showList:false,//是否显示 搜索结果
      showSearch:false//是否显示 搜索提示
    }
  },
  created(){
      window.addEventListener('scroll',()=>{
          let scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动距离
          let clientHeight=document.documentElement.clientHeight||document.body.clientHeight;//可是高度
          let barTop=this.$refs.scrollbar.offsetTop;//最后一个元素的距离顶部距离

          console.log(scrollTop,clientHeight,barTop);

      });
  },
  destroy(){
    window.removeEventListener('scroll');//一定要移除
  },
  methods:{
      searchList(keywords){//点击确认搜索 显示搜索结果列表
        // this.keywords=keywords;
        this.showList=false;
        this.searching=true;
        this.showSearch=false;
        this.axios.get('/search?keywords='+keywords).then(d=>{//根据关键词得到搜索结果.
            if(d.data.code==200){
              this.showList=true;
              this.searching=false;
              this.searchMusicList=d.data.result.songs.map(dat=>{
                return {
                  name:dat.name,
                  id:dat.id,
                  song:{
                    artists:dat.artists,
                    privilege:{
                      maxbr:1
                    }
                  }
                }
              });
            }
        });
      }
  },
  watch:{
    keywords(val){//输入关键字
      this.searching=true; //loadding要显示
      this.showList=false;
      this.suggests=[];
      this.$http.get('/search/suggest?keywords='+val).then(data=>{
        if( data.data.code==200&&data.data.result.order){
            let result=data.data.result;  
            let re=result.order.reduce((prev,v)=>{
                if(v!=='playlists'){
                    let rev=result[v];
                    return prev.concat(rev);
                }
                return prev;
            },[]);
            this.suggests=re;
            this.searching=false;
            this.showSearch=true;
            if(this.keywords==''){//判断如果搜索的字词已经全部删除为空.
              this.suggests=[];
            }
        }
      }).finally(()=>{
        this.searching=false;
      });
    }
  },
  components:{
    Suggest,
    Loading,
    SearchResult
  }
}
</script>
<style lang="less" scoped>
.search{
  display: flex;
  margin:10px;
  padding:5px 10px;
  background: #ebecec;
  border-radius: 20px;
  input{
        border:none;
        outline: none;
        flex:1;
        background-color: transparent;
        padding: 0 5px;
  }
  i{
    display: inline-block;
    width:13px;
    height:13px;
    &:first-of-type{
      background-image: url();
    }
    &:last-of-type{
      background-image: url();
    }
  }
}
</style>